<template>
  <div class="app-container-10 container-f0f2f5 app-main system-role-assigning-users-container">
    <div class="container-fff app-container-15 app-ele-border-radius-0">
      <div class="system-user-content">
        <div class="sys-content-search">
          <el-form ref="searchFrom" :inline="true" size="small" :model="userDataSearch">
            <el-form-item label="用户名称" prop="userName">
              <el-input v-model="userDataSearch.userName" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号码" prop="mobile">
              <el-input v-model="userDataSearch.mobile" clearable></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="userDataFilter" icon="el-icon-search">搜索</el-button>
              <el-button @click="$refs.searchFrom.resetFields()" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--用户列表-->
        <div class="sys-content-users">
          <!--操作-->
          <div class="sys-btn-box">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="dialogAddUser=true">添加用户</el-button>
            <!-- 多选后删除-->
            <el-button size="small" type="danger" icon="el-icon-delete" :disabled="!delUserList.length" @click="isCan">
              批量取消授权
            </el-button>
          </div>
          <evue-table :data="userData" :option="userOption" @selectionChange="selectionChange"
                      @handleDelete="handleDelete">
            <template v-slot:userStatus="props">
              <el-tag :type="props.data.status?'success':'danger'" effect="dark">{{props.data.status?'正常':'关闭'}}</el-tag>
            </template>
          </evue-table>
        </div>
      </div>
    </div>
    <!--添加用户-->
    <el-dialog
            custom-class="up-dialog"
            :close-on-click-modal="false"
            top="5vh"
            title="新增用户"
            :visible.sync="dialogAddUser"
            width="1100px"
    >
      <div class="dialog-content add-user-pop app-ele-border-radius-0">
        <evue-table :data="userData" :option="addUserPopOption" @selectionChange="selectionAddUserChange"
                    @handleDelete="handleDelete">
          <template v-slot:userStatus="props">
            <el-tag :type="props.data.status?'success':'danger'" effect="dark">{{props.data.status?'正常':'关闭'}}</el-tag>
          </template>
        </evue-table>
      </div>
      <div slot="footer" style="text-align: left">
        <el-button size="small" type="primary" @click="addUserFun">确定</el-button>
        <el-button size="small" @click="dialogAddUser=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import User from './role-assigning-users'

  export default User
</script>
